<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"></html>
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="full-screen" content=yes/>
    <meta name="browsermode" content="application"/>
    <meta name="x5-orientation" content="portrait">
    <meta name=x5-fullscreen content="true"/>
    <meta name="x5-page-mode" content="app"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui"/>

    <title>活动预览</title>
    <script th:src="@{/wap/js/vue.min.js}"></script>
    <script th:src="@{/wap/js/axios.min.js}"></script>
    <script th:src="@{/wap/js/index.js}"></script>
    <link rel="stylesheet" th:href="@{/wap/css/activity.css}">
</head>
<body>
<div id="content" >
    <header class="heads">
        <p class="head-time">活动时间:{{contents.startTime}}/{{contents.endTime}}</p>
        <span class="head-active">商家地址: {{contents.address}}</span>
    </header>
    <section class="secs">
        <div class="sec-head">
            <p class="sec-title">
                <span>以下商品疯狂折扣<span class="red" v-text="contents.discountRate"></span>折</span>
            </p>
            <ul class="sec-list clear">
                <li v-for="item in contents.activityProductResultList">
                    <div class="sec-list-img"><img :src="item.mainImage" alt=""></div>
                    <p class="sec-text" v-text="item.name"></p>
                </li>
            </ul>
        </div>
        <div class="sec-foot">
            <div class="line">活动规则</div>
            <ul class="sec-foot-list">
                <li>1, 以上商品不限制购买数量, 到店即可购买;</li>
                <li>2, 最终解释权归商家所有;</li>
            </ul>
        </div>
    </section>
    <footer class="foot">
        <div class="foot-form clear">
            <div class="clear">
                <span class="foot-form-text">姓名</span>
                <span class="foot-form-input"><input type="text" v-model="name"/></span>
            </div>
            <div class="clear">
                <span class="foot-form-text">电话</span>
                <span class="foot-form-input"><input type="tel" v-model="phone"/></span>
            </div>
        </div>
        <p class="foot-btn" @click="goSubmit">去看看</p>
    </footer>
    <div class="right-nav" @click="phone()">
	    <a :href="tel">
	        <img class="nav-tel" th:src="@{/wap/img/tel.png}" alt="">
	        <p class="nav-text">联系商家</p>
        </a>
    </div>
</div>
<script th:inline="javascript">
    var baseUrl = [[${baseUrl}]];
</script>
<script th:src="@{/wap/js/jquery-2.1.1.js}"></script>
<script th:inline="javascript">
	/*<![CDATA[*/
	var arr = /*[[${contents}]]*/;
	/*]]>*/
	
	console.log("arr="+arr);
	arr = JSON.parse(arr);
	
    var app = new Vue({
        el: '#content',
        data: {
            contents: {},
            name: '',
            phone: '',
            tel: '',
        },
        methods: {
            /*页面数据获取*/
            getNew: function () {
                var zxc = this;
                axios.post(baseUrl + 'dealer/wap/app/activity/info/' + GetQueryString('id'), {
                }).then(function (response) {
                    document.title = response.data.data.name
                    zxc.contents = response.data.data;
                    zxc.tel = 'tel:' + response.data.data.phone
                }).catch(function (error) {
                    console.log(error);
                });

            },
            goSubmit: function () {
            	if(this.name.trim()===''||this.phone.trim()===''){
            		alert("客户名称和号码不能为空");
            		return ;
            	}
            	
                axios.post(baseUrl + 'platform/wap/app/customer/collect', {id:GetQueryString('id'),userId:GetQueryString('userId'),name:this.name,phone:this.phone
                }).then(function (response) {
                	if(response.data.code==20000)
                    	location.href= baseUrl + 'dealer/wap/app/store/view?id=' + response.data.data;
                }).catch(function (error) {
                    console.log(error);
                });
                
            }
        },
        created: function (){
            if (GetQueryString('text') === '0'){
            	this.contents = arr;
            } else {
            	this.getNew();
            }
        }
    });
</script>
</body>
</html>
